<template>
    <ul class="nav-sections">
        <li class="section-link-li" v-for="node in value" :key="node.id">
            <nuxt-link class="section-link-a"
                         :to="node.path"
                         :class="{'active':clickSection===node.id||hoverSection===node.id}"
                         @click.native="goTo(node.id)"
                         @mouseenter.native="hoverSection=node.id"
                         @mouseout.native="hoverSection=''"
            >{{node.name}}
            </nuxt-link>
        </li>
    </ul>
</template>

<script>
  export default {
    name: 'SimpleNav',
    props: {
      value: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data: () => ({
      clickSection: '',
      hoverSection: ''
    }),
    created () {
      let initSectionName = this.$route.name
      this.value.some(nav => {
        if (nav.routeName === initSectionName) {
          this.clickSection = nav.id
          return true
        }
      })
    },
    methods: {
      goTo (section) {
        this.clickSection = section
      }
    }
  }
</script>

<style>
    .nav-sections {
        height: 200px;
        font-weight: 600;
    }

    .section-link-li {
        margin-bottom: 10px;
    }

    .section-link-a {
        display: inline-block;
        position: relative;
        height: 38px;
        line-height: 38px;
        color: rgba(0, 0, 0, .7);
        font-size: 18px;
    }

    .section-link-a.active {
        cursor: pointer;
        color: #a175ed;
    }

    .section-link-a:after {
        content: "";
        position: absolute;
        height: 2px;
        bottom: 5px;
        left: 0;
        right: 0;
        background-color: #a175ed;
        transform: scaleX(0);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .section-link-a.active:after {
        transform: scaleX(1);
    }
</style>
